<template>
  <!-- 条件筛选 -->
  <div class="page_filter">
    <!-- 搜索框 -->
    <div class="homemainC">
      <div class="homemainCTop">
        <el-select popper-class="popDown" v-model="proxyProjectId" clearable placeholder="选择项目" filterable @change="changeRoad" class="board_select" >
          <el-option
            v-for="item in projectList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>

      </div>
    </div>
    </div>
<!--    <organization-unit style="width: 400px;" v-model="proxyDeptTreeId"  @change="selectOrgHandel" :changeOnSelect='true' placeholder="选择管养单位" custom-class="board_select"  popper-class="board_select-pop"></organization-unit>-->

</template>

<script>
import {projectSelect,} from '@/services/model/project-info'
// import OrganizationUnit from '@/components/organization-unit/all'
export default {
  props: ['deptTreeId', 'roadId', 'slopeId','projectId'],
  // components: { OrganizationUnit },
  data () {
    return {
      projectList: [],
      bidSlopeList: [],
      form:{
        deptTreeId:'',
        roadId:'',
        slopeId:'',
        projectId:''
      }
    }
  },
  computed: {
    proxyDeptTreeId: {
      get () {
        return this.deptTreeId
      },
      set (value) {
        this.$emit('update:deptTreeId', value)
        this.form.deptId = value
      }
    },
    proxyRoadId: {
      get () {
        return this.roadId
      },
      set (value) {
        this.$emit('update:roadId', value)
        this.form.roadId = value
      }
    },
    proxySlopeId: {
      get () {
        return this. proxySlopeId
      },
      set (value) {
        this.$emit('update: proxySlopeId ', value)
        this.form. proxySlopeId = value
      }
    },
    proxyProjectId: {
      get () {
        return this.projectId
      },
      set (value) {
        this.$emit('update:projectId', value)
        this.form.projectId = value
      }
    },
  },
  methods: {

    //获取项目列表
    async getProjectList() {
      const {data} = await projectSelect(this.form.projectId)
      this.projectList = data
    },
    changeRoad() {
      this.$emit('changeRoad')
    },

  },
  mounted() {
    this.getProjectList()
  }
}
</script>


<style lang="less" scoped>
    // select
    @select-bk: transparent !important;
    @select-hover: transparent!important;
    @select-choose: transparent !important;
    @select-disabled: transparent !important;
    @select-group-title: transparent !important;
    @select-group-border:transparent !important;
    @select-item-span:transparent !important;
    @select-choose: transparent !important;
  // select
  .board_select-pop.el-popper {
    .el-select-dropdown__item  {
      background-color: @select-bk;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      background-color: @select-hover;
    }
    .el-select-dropdown__item.selected span,
    .el-select-dropdown__item.selected {
      color: @select-choose;
    }
    .el-select-group__title {
      color: @select-group-title;
    }
    .el-select-dropdown__item.is-disabled {
      color: @select-disabled;
    }
    .el-select-group__wrap::after {
      background-color: @select-group-border;
    }
    .el-select-dropdown__item span{
      color: @select-item-span;
    }
  }
    .board_select{
      width: 100%;
      border-color: transparent;
    }
    .board_select .el-input.is-focus/deep/ .el-input__inner {

    background: transparent !important;
  }
    .el-select .el-input.is-focus /deep/.el-input__inner{
      border-color: transparent !important;
    }
    .board_select /deep/ .el-input {
      width: 100%;
      position: relative;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .board_select /deep/  .el-input__suffix {
      position: relative;
      height: 100%;
      margin-right: 10px;
    }



    .board_select /deep/ .el-input__prefix, .el-input__suffix {
      height: 30px;
    }

    /* 下面设置右侧按钮居中 */
    .el-input__suffix {
      top: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .el-input__icon {
      line-height: 32px;
    }
    .board_select /deep/ .el-input__inner {
      border-color: transparent;
      background: transparent !important;
      font-size: 14px;
      font-family: MiSans;
      font-weight: 400;
      color: #E2EBF1 !important;
    }
  .board_select {
    margin-left: 10px;
    .is-focus .el-input__suffix .el-icon-arrow-up{
      color: @select-choose;
    }
  }

  .page_filter {
    display: inline-block;
    position: absolute;
    left: 45%;
    top: 8%;
    z-index: 5;
  }
</style>
<style lang="less">
  .el-select .el-input.is-focus .el-input__inner{
    border-color: transparent !important;
  }
  .homemainC {
    position: relative;
    width: calc(54% - 60px);
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .homemainCTop {
      background: url("../../../../assets/selectedBg.png") no-repeat;
      width: 292px;
      height: 40px;
      background-size: 100% 100%;
      margin-top: 40px;
      pointer-events: initial;
    }

    :deep(.homemainCTop) {
      .el-select {
        width: 100%;
        position: relative;
        height: 100%;
      }

    }
  }
</style>
<style lang="less">
  .popDown {
    border: 1px solid #2099c5;
    border-radius: 4px;
    background-color: #08234d;
    box-sizing: border-box;
    margin: 5px 0;

    .el-select-dropdown__item {
      color: #fff;
    }

    .el-select-dropdown__item.hover {
      background: #21b2de;
      color: #fff;
    }

    .el-select-dropdown__item.selected {
      background: #21b2de;
    }

    .popper__arrow::after {
      border-bottom-color: #21b2de !important;
    }
  }
</style>
